@import './variable.less';

.ph{
  background: rgba(0, 0, 0, 0.1);
}
/* flex布局中水平垂直居中 */
.flex-hv-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 水平轴居中 */
.flex-h-center {
  justify-content: center;
}
/* 水平轴最左最右 */
.flex-h-sb {
  justify-content: space-between;
}
/* 水平轴靠右 */
.flex-h-right {
  justify-content: flex-end;
}
/* 水平轴靠左 */
.flex-h-left {
  justify-content: flex-start;
}

/* 交叉轴居中 */
.flex-v-center {
  align-items: center;
}
/* flex布局,水平排列 */
.flex-row {
  display: flex;
  flex-direction: row;
}
/* flex布局,垂直排列 */
.flex-column{
  display: flex;
  flex-direction: column;
}

.ellipsis {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-red {
  background-color: @color-red  !important;
}

// 颜色
.bg-red {
  background-color: @color-red  !important;
}

.bg-purple {
  background-color: @color-purple  !important;
}

.bg-orange {
  background-color: @color-orange  !important;
}

.bg-blue {
  background-color: @color-blue  !important;
}

.color-red {
  color: @color-red  !important;
}

.color-purple {
  color: @color-purple  !important;
}

.color-orange {
  color: @color-orange  !important;
}

.color-blue {
  color: @color-blue  !important;
}

.text-black {
  color: #000;
}

.text-dark {
  color: #333;
}

.text-deep {
  color: #555;
}

.text-weak {
  color: #B3B3B3;
}

.text-white {
  color: #fff;
}

// 字体
.f10 {
  font-size: 10px;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
}

.f15 {
  font-size: 15px;
}

.f17 {
  font-size: 17px;
}

.f20 {
  font-size: 20px;
}

.f24 {
  font-size: 24px;
}

// 文字对齐
.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

// 浮动与清除浮动
.fl {
  float: left;
}

.fr {
  float: right;
}

.fix {
  *zoom: 1;
}

.fix:after {
  display: table;
  content: '';
  clear: both;
}

// 显示
.dn {
  display: none;
}

.di {
  display: inline;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.dt {
  display: table;
}

div.dib {
  *display: inline;
  *zoom: 1;
}

.vm {
  vertical-align: middle;
}

.vib {
  display: inline-block;
  vertical-align: middle;
}

// 定位
.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.pf {
  position: fixed;
}

// 盒子模型
.ml4 {
  margin-left: 4px;
}

.mr4 {
  margin-right: 4px;
}

.mt4 {
  margin-top: 4px;
}

.mb4 {
  margin-bottom: 4px;
}

.ml8 {
  margin-left: 8px;
}

.mr8 {
  margin-right: 8px;
}

.mt8 {
  margin-top: 8px;
}

.mb8 {
  margin-bottom: 8px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb16 {
  margin-bottom: 16px;
}

.ml12 {
  margin-left: 12px;
}

.pl12 {
  padding-left: 12px;
}

.pl20{
  padding-left: 20px;
}

.mr12 {
  margin-right: 12px;
}

.mt12 {
  margin-top: 12px;
}

.mb12 {
  margin-bottom: 12px;
}

.ml16 {
  margin-left: 16px;
}

.mr16 {
  margin-right: 16px;
}

.mt16 {
  margin-top: 16px;
}

.ml20 {
  margin-left: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mr30 {
  margin-right: 30px;
}

.mr50 {
  margin-right: 50px;
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml24 {
  margin-left: 24px;
}

.mr24 {
  margin-right: 24px;
}

.mt24 {
  margin-top: 24px;
}

.mb24 {
  margin-bottom: 24px;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml15 {
  margin-left: 15px;
}

.mr15 {
  margin-right: 15px;
}

.mt15 {
  margin-top: 15px;
}

.mb15 {
  margin-bottom: 15px;
}

.borderBottom-line{
  border-bottom: 1px solid #3a4264;
}
.borderRight-line{
  border-right: 1px solid #3a4264;
}

// 全屏遮雾罩
.mask{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

// 鼠标悬停变小手
.cp{
  cursor: pointer;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar
 {
     width:8px;
     height: 10px;
     background-color: #f9fafc;
 }
 /*定义滚动条轨道
  内阴影+圆角*/
 ::-webkit-scrollbar-track
 {
     border-radius:2px;
     background-color:#ffffff;
 }
 /*定义滑块
  内阴影+圆角*/
 ::-webkit-scrollbar-thumb
 {
     border-radius:2px;
     background-color:#DCDCDC;
 }
